<template>
    <n-drawer :show="active" :width="width" @update:show="(flag:boolean) => (active = flag)">
        <n-drawer-content :native-scrollbar="false" title="客户详情" closable>
            <n-spin :show="loading">
                <n-space vertical :size="24" v-if="customer.id">
                    <n-card size="small">
                        <n-space vertical :size="24">
                            <n-form label-placement="left" inline :show-feedback="false">
                                <n-form-item label="客户ID">
                                    <b>{{ customer.id }}</b>
                                </n-form-item>
                                <n-form-item label="姓名">
                                    <b>{{ customer.idc.name || customer.name }}</b>
                                </n-form-item>
                                <n-form-item label="电话">
                                    <b>{{ customer.phone }}</b>
                                </n-form-item>
                                <n-form-item label="证件号码">
                                    <b>{{ customer.sno }}</b>
                                </n-form-item>
                                <n-form-item label="注册时间">
                                    <b>{{ customer.create }}</b>
                                </n-form-item>
                            </n-form>
                            <n-form label-placement="left" inline :show-feedback="false" v-if="customer.order.id">
                                <n-form-item label="最近下单">
                                    <b>{{ customer.order.time }}</b>
                                </n-form-item>
                                <n-form-item label="最近门店">
                                    <b>{{ customer.order.mch.name }}</b>
                                </n-form-item>
                                <n-form-item label="订单统计">
                                    共
                                    <b>{{ customer.mchs.length }}</b>
                                    家门店，共
                                    <b>{{ customer.count }}</b>
                                    单，
                                    <b>{{ (customer.total / 100).toFixed(2) }}</b>
                                    元，平均
                                    <b>{{ (customer.total / customer.count / 100).toFixed(2) }}</b>
                                    元
                                </n-form-item>
                            </n-form>
                        </n-space>
                    </n-card>

                    <n-image-group show-toolbar-tooltip>
                        <n-grid :cols="5" :x-gap="12" :y-gap="12">
                            <n-gi>
                                <n-card title="身份证人像面" size="small" :content-style="{ textAlign: 'center' }">
                                    <n-image object-fit="cover" width="230" height="130" :src="customer.idc.pica || 'https://cdn.hangzhouyizuke.com/res/app/icons/zjt/imgn.png'" />
                                </n-card>
                            </n-gi>
                            <n-gi>
                                <n-card title="身份证国徽面" size="small" :content-style="{ textAlign: 'center' }">
                                    <n-image object-fit="cover" width="230" height="130" :src="customer.idc.picb || 'https://cdn.hangzhouyizuke.com/res/app/icons/zjt/imgn.png'" />
                                </n-card>
                            </n-gi>
                            <n-gi>
                                <n-card title="驾驶证正本" size="small" :content-style="{ textAlign: 'center' }">
                                    <n-image object-fit="cover" width="230" height="130" :src="customer.dlc.pica || 'https://cdn.hangzhouyizuke.com/res/app/icons/zjt/imgn.png'" />
                                </n-card>
                            </n-gi>
                            <n-gi>
                                <n-card title="驾驶证副本" size="small" :content-style="{ textAlign: 'center' }">
                                    <n-image object-fit="cover" width="230" height="130" :src="customer.dlc.picb || 'https://cdn.hangzhouyizuke.com/res/app/icons/zjt/imgn.png'" />
                                </n-card>
                            </n-gi>
                            <n-gi>
                                <n-card title="最近人脸识别" size="small" :content-style="{ textAlign: 'center' }">
                                    <n-image object-fit="cover" width="230" height="130" :src="customer.order.himg || 'https://cdn.hangzhouyizuke.com/res/app/icons/zjt/imgn.png'" />
                                </n-card>
                            </n-gi>
                        </n-grid>
                    </n-image-group>

                    <n-grid :cols="2" :x-gap="12" :y-gap="12">
                        <n-gi>
                            <n-card title="租车门店" size="small">
                                <n-space vertical>
                                    <template v-if="customer.mchs.length > 0">
                                        <n-table :single-line="false">
                                            <thead>
                                                <tr>
                                                    <th width="100px">门店ID</th>
                                                    <th>门店名称</th>
                                                    <th width="100px">租赁次数</th>
                                                </tr>
                                            </thead>
                                        </n-table>
                                        <n-scrollbar style="max-height: 300px">
                                            <n-table :single-line="false">
                                                <tbody>
                                                    <tr v-for="mch in customer.mchs">
                                                        <td width="100px">S{{ mch.id }}</td>
                                                        <td>{{ mch.name }}</td>
                                                        <td width="100px">{{ mch.count }}次</td>
                                                    </tr>
                                                </tbody>
                                            </n-table>
                                        </n-scrollbar>
                                    </template>
                                    <n-empty description="暂无租车门店" v-else></n-empty>
                                </n-space>
                            </n-card>
                        </n-gi>
                        <n-gi>
                            <n-card title="客户备注" size="small">
                                <template #header-extra>
                                    <n-button
                                        strong
                                        secondary
                                        type="primary"
                                        size="tiny"
                                        @click="
                                            () => {
                                                memo = ''
                                                addMemo = true
                                            }
                                        "
                                    >
                                        添加备注
                                    </n-button>
                                </template>
                                <n-space vertical>
                                    <n-input-group v-if="addMemo">
                                        <n-input v-model:value="memo" placeholder="请填写备注内容" />
                                        <n-popconfirm :negative-text="null" @positive-click="execSaveMemo">
                                            <template #trigger>
                                                <n-button :disabled="memo == ''" type="primary">保存</n-button>
                                            </template>
                                            是否保存备注信息？
                                        </n-popconfirm>
                                        <n-button
                                            @click="
                                                () => {
                                                    addMemo = false
                                                }
                                            "
                                        >
                                            取消
                                        </n-button>
                                    </n-input-group>
                                    <template v-if="memos.length > 0">
                                        <n-table :single-line="false">
                                            <thead>
                                                <tr>
                                                    <th width="150px">备注时间</th>
                                                    <th width="100px">添加人</th>
                                                    <th>备注内容</th>
                                                </tr>
                                            </thead>
                                        </n-table>
                                        <n-scrollbar style="max-height: 300px">
                                            <n-table :single-line="false">
                                                <tbody>
                                                    <tr v-for="memo in memos">
                                                        <td width="150px">{{ memo.time }}</td>
                                                        <td width="100px">{{ memo.adder.name }}</td>
                                                        <td>{{ memo.info }}</td>
                                                    </tr>
                                                </tbody>
                                            </n-table>
                                        </n-scrollbar>
                                    </template>
                                    <n-empty description="暂无备注信息" v-else></n-empty>
                                </n-space>
                            </n-card>
                        </n-gi>
                    </n-grid>

                    <n-card size="small" title="订单列表">
                        <template #header-extra>
                            <n-button
                                strong
                                secondary
                                size="tiny"
                                @click="
                                    () => {
                                        ordersActive = true
                                    }
                                "
                            >
                                更多
                            </n-button>
                        </template>

                        <n-table :single-line="false">
                            <thead>
                                <tr>
                                    <th>订单ID</th>
                                    <th>下单时间</th>
                                    <th>完成时间</th>
                                    <th>订单状态</th>
                                    <th>门店信息</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="order in orders">
                                    <td>
                                        <n-button
                                            @click="
                                                () => {
                                                    oitem = order
                                                    orderActive = true
                                                }
                                            "
                                        >
                                            D{{ order.id }}
                                        </n-button>
                                    </td>
                                    <td>{{ order.times.create }}</td>
                                    <td>{{ order.times.finish || order.times.cancel }}</td>
                                    <td>
                                        <n-tag :bordered="false" size="small" type="error" v-if="order.state == 1">等待支付</n-tag>
                                        <n-tag :bordered="false" size="small" type="warning" v-if="order.state == 2">等待服务</n-tag>
                                        <n-tag :bordered="false" size="small" type="success" v-if="order.state == 3">租赁中</n-tag>
                                        <n-tag :bordered="false" size="small" type="info" v-if="order.state == 4">已完成交车</n-tag>
                                        <n-tag :bordered="false" size="small" v-if="order.state == 9">订单取消</n-tag>
                                    </td>
                                    <td>
                                        <n-text code>S{{ order.merchant.id }}</n-text>
                                        {{ order.merchant.name }}
                                    </td>
                                </tr>
                            </tbody>
                        </n-table>
                        <n-empty description="暂无订单信息" v-if="orders.length == 0"></n-empty>
                    </n-card>
                </n-space>
            </n-spin>

            <template #footer>
                <n-space justify="space-between" :style="{ width: '100%' }">
                    <n-space></n-space>
                    <n-button @click="() => (active = false)">
                        <template #icon>
                            <n-icon :component="CloseRound" />
                        </template>
                        关闭
                    </n-button>
                </n-space>
            </template>

            <Orders :item="customer" v-model:show="ordersActive" v-if="ordersActive"></Orders>
            <Order :item="oitem" v-model:show="orderActive" v-if="orderActive"></Order>
        </n-drawer-content>
    </n-drawer>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
import { CloseRound } from '@vicons/material'
import { useStore } from '@/store'
import { Http } from '@/libs'

import Orders from './Orders.vue'
import Order from '../order/View.vue'

import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn' // 导入本地化语言
import customParseFormat from 'dayjs/plugin/customParseFormat'
dayjs.locale('zh-cn')
dayjs.extend(customParseFormat)

const { $notification: notification } = window

const store = useStore()
const width = computed(() => Math.max(store.state.browser.innerWidth * 0.8, 1200))
const loading = computed(() => store.state.loading.flag)

const prop = defineProps({
    show: {
        type: Boolean,
        required: true,
    },
    item: {
        type: Object,
        required: true,
    },
})

const emit = defineEmits(['update:show', 'refresh'])

const active = computed({
    get: () => prop.show,
    set: val => emit('update:show', val),
})
const customer = ref<any>({})
const execLoad = () => {
    Http.post('/ops/biz/customer/detail', { id: prop.item.id }).then(resp => {
        if (resp.stat.err > 0) {
            return
        }
        customer.value = resp.data
        execLoadOrder()
    })
}
const orders = ref<any>([])

const execLoadOrder = () => {
    Http.post('/ops/biz/order/list', {
        query: {
            begin: dayjs().subtract(1, 'year').format('YYYY-MM-DD'),
            close: dayjs().format('YYYY-MM-DD'),
            mchid: '',
            carid: '',
            orderid: '',
            rentid: customer.value.id,
            area: '',
            name: '',
            mob: '',
            state: 0,
        },
        pager: {
            page: 1,
            size: 5,
            time: new Date().getTime(),
        },
    }).then(resp => {
        if (resp.stat.err > 0) {
            return
        }
        orders.value = resp.data.items
    })
}

const memos = ref<any[]>([])
const execLoadMemo = () => {
    Http.post('/ops/biz/customer/memo/list', { id: prop.item.id }).then(resp => {
        if (resp.stat.err > 0) {
            return
        }
        memos.value = resp.data.items
    })
}

const addMemo = ref<boolean>(false)
const memo = ref<string>('')

const execSaveMemo = () => {
    if (!memo.value) {
        notification.error({
            duration: 1500,
            title: '请填写备注内容',
        })
    }
    Http.post('/ops/biz/customer/memo/add', { id: prop.item.id, info: memo.value }).then(resp => {
        if (resp.stat.err > 0) {
            return
        }
        memo.value = ''
        addMemo.value = false
        execLoadMemo()
    })
}

const ordersActive = ref<boolean>(false)
const orderActive = ref<boolean>(false)
const oitem = ref<any>({})

onMounted(() => {
    execLoad()
    execLoadMemo()
})
</script>
